<template>
	<div class="app-container">
		<avue-crud
			:option="option"
			:table-loading="loading"
			:data="data"
			:page.sync="page"
			:search.sync="query"
			v-model="form"
			ref="crud"
			@search-change="searchChange"
			@search-reset="searchReset"
			@selection-change="selectionChange"
			@current-change="currentChange"
			@size-change="sizeChange"
			@row-update="rowUpdate"
			@row-save="rowSave"
			@row-del="rowDel"
			@refresh-change="refreshChange"
			@on-load="onLoad"
		>
			<template slot-scope="scope" slot="bindStatus">
				<el-tag :type="scope.row.bindStatus == 0 ? 'info' : scope.row.bindStatus == 1 ? 'success' : 'danger'">
					{{ scope.row.$bindStatus }}
				</el-tag>
			</template>
		</avue-crud>
	</div>
</template>
<script>
import dayjs from "dayjs";
import { getList, addOrEditData, delData } from "@/api/ecgManage/device";
import { crudMxins } from "@/mixins/index";
export default {
	mixins: [crudMxins],
	activated() {
		setTimeout(() => {
			this.$nextTick(() => {
				this.$refs.crud.doLayout();
				if (!this.loading) {
					this.onLoad(this.page);
				}
			});
		}, 100);
	},
	data() {
		return {
			data: [],
			currentRow: null,
			deptOptions: [],
			userList: []
		};
	},
	computed: {
		option() {
			return {
				index: true,
				indexLabel: "序号",
				calcHeight: 30,
				searchShow: true,
				searchMenuSpan: 5,
				addBtn: true,
				editBtn: true,
				searchLabelWidth: 120,
				dialogClickModal: false,
				dialogDrag: true,
				tip: false,
				border: true,
				menu: true,
				searchIndex: 10,
				searchIcon: true,
				span: 12,
				viewBtn: false,
				delBtn: true,
				menuWidth: 200,
				column: [
					{
						label: "设备mac",
						prop: "deviceMac",
						search: true,
						editDisabled:true
					},
					{
						label: "设备名称",
						prop: "deviceName",
						search: true
					},
					{
						label: "设备类型",
						prop: "deviceType",
						type: "select",
						search: true,
						dicData: [
							{
								label: "网关(手环)",
								value: 0
							},
							{
								label: "心电",
								value: 1
							},
							{
								label: "血压",
								value: 2
							}
						]
					},
					{
						label: "设备状态",
						prop: "bindStatus",
						type: "select",
						search: true,
						display: false,
						dicData: [
							{
								label: "未绑定",
								value: 0
							},
							{
								label: "已绑定",
								value: 1
							},
							// {
							// 	label: "绑定中",
							// 	value: 2
							// },
							// {
							// 	label: "解绑中",
							// 	value: 3
							// },
							// {
							// 	label: "绑定失败",
							// 	value: 4
							// }
						]
					}
				]
			};
		}
	},
	created() {},
	methods: {
		rowSave(row, done, loading) {
			addOrEditData(row)
				.then((res) => {
					this.onLoad(this.page);
					done();
				})
				.finally(() => {
					loading();
				});
		},
		rowUpdate(row, index, done, loading) {
			addOrEditData(row)
				.then((res) => {
					this.onLoad(this.page);
					done();
				})
				.finally(() => {
					loading();
				});
		},
		rowDel(row, index) {
			console.log(row, index);
			this.$confirm("确定删除本条信息?", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				delData({
					idList: [row.id]
				}).then((res) => {
					this.$message({
						type: "success",
						message: "操作成功!"
					});
					// 数据回调进行刷新
					this.onLoad(this.page);
				});
			});
		},
		onLoad(page, params = {}) {
			this.loading = true;
			getList(
				Object.assign(params, this.query, {
					pageNum: page.currentPage,
					pageSize: page.pageSize
				})
			).then((res) => {
				this.page.total = res.data.total;
				this.data = res.data.records;
				this.loading = false;
				this.selectionClear();
			});
		}
	}
};
</script>

<style scoped lang="scss">
.handle-btn {
	margin-top: 20px;
	text-align: right;
}

.remarks {
	display: inline-block;
	margin-top: 20px;
}
</style>
